
<div class="business-title-container" nz-col nzXs="24" nzSm="24">
    <div class="business-title">待企业付款</div>
</div>
<div nz-row nzGutter="16">
    <!--宽屏显示为表格-->
    <div nz-col nzXs="24" nzSm="24" class="padding-left-right-5px display-none-smaller-Sm">
        <nz-card [nzBordered]="false" nzNoPadding class="business-card">
            <div class="list-head-container">
                <div class="list-head-title">赞助标题</div>
                <div class="list-head-word" style="width:15%">时间</div>
                <div class="list-head-word" style="width:8%">合作人</div>
                <div class="list-head-word" style="width:15%">企业</div>
                <div class="list-head-word">部门</div>
                <div class="list-head-word">联系方式</div>
                <div class="list-head-word" style="width:10%">金额</div>
                <div class="list-head-word" style="width:7%">操作</div>
            </div>
            <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'"
                 class="py-sm bg-grey-lighter-h point border-top display-none-smaller-Sm"
                 *ngFor="let item of todoData">
                <div class="business-list-container">
                    <div class="list-content-title">
                        <div nz-col [nzSpan]="22">
                            <p class="list-topic overFlow">{{item.title}}</p>
                        </div>
                    </div>
                    <div class="list-content-time-container" style="width:15%">
                        <div class="list-content-time">
                            {{item.startDate}}
                        </div>
                        <div class="list-content-time">
                            ~
                        </div>
                        <div class="list-content-time">
                            {{item.endDate}}
                        </div>
                    </div>
                    <div class="list-content-word" style="width:8%">
                        {{item.copName}}
                    </div>
                    <div class="list-content-word" style="width:15%">
                        {{item.company}}
                    </div>
                    <div class="list-content-word">
                        {{item.department}}
                    </div>
                    <div class="list-content-word">
                        {{item.phone}}
                    </div>
                    <div class="list-content-word" style="width:10%">
                        ￥ {{item.amount}}
                    </div>
                    <div class="list-content-word" style="width:7%">
                        <a (click)="showModal(item.title,item.amount)">
                            支付
                        </a>
                    </div>
                </div>
            </div>
        </nz-card>
    </div>
    <!--窄屏显示为卡片-->
    <div nz-col nzXs="24" class="padding-left-right-5px list-to-card-container display-none-bigger-Sx">
        <nz-card [nzBordered]="false" nzNoPadding class="business-card">
            <ng-container *ngFor="let item of todoData">
                <div class="list-to-card-one border-bottom hover">
                    <div class="list-to-card-title">
                            <p class="list-topic overFlow">{{item.title}}</p>
                    </div>
                    <div class="list-to-card-content">
                        <div class="list-to-card-word">{{item.company}}</div>
                        <div class="list-to-card-word">{{item.startDate}}~{{item.endDate}}</div>
                        <div class="list-to-card-word">{{item.phone}}</div>
                        <div class="list-to-card-word1" >
                            <div style="color: deeppink;font-size: 1.5rem">￥{{item.amount}}</div>
                            <div><a (click)="showModal(item.title,item.amount)">
                                支付
                            </a>
                            </div>
                        </div>
                    </div>
                </div>
            </ng-container>
        </nz-card>
    </div>
</div>
<nz-modal [nzVisible]="isVisible" [nzTitle]="'支付二维码'" [nzContent]="modalContent" (nzOnCancel)="handleCancel($event)" (nzOnOk)="handleOk($event)">
    <ng-template #modalContent>
        <p>{{modalTitle}}</p>
        <h2 style="color: deeppink;">￥{{modalAmount}}</h2>
        <img src="./../../../../../assets/img/qr.png" style="width: 260px">
    </ng-template>
</nz-modal>
